<template>
  <div id="container">地图加载中...</div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'
import { useHealthData } from '@/store/health'
const saveLat = useHealthData()
let map: any = null
const emit = defineEmits()
onMounted(() => {
  AMapLoader.load({
    key: 'c5031f421ee4d9ce394448b6c79db21a', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.Geocoder'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      map = new AMap.Map('container', {
        // 设置地图容器id
        viewMode: '3D', // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center: [106.55, 29.57] // 初始化地图中心点位置
      })
      var geocoder = new AMap.Geocoder({
        city: '010', //城市设为北京，默认：“全国”
        radius: 1000 //范围，默认：500
      })
      var marker = new AMap.Marker() //生成标记点对象
      // 地图点击事件
      map.on('click', function (e: { lnglat: { lng: number; lat: number } }) {
        console.log('地图', e)
        let { lng, lat } = e.lnglat
        regeoCode([lng, lat])
        console.log('地图坐标：', lng, lat)
        saveLat.updataLat(e.lnglat)
      })
      // 根据经纬度，解析得到地理位置信息（逆地理编码）
      function regeoCode(lnglat: [number, number]) {
        map.add(marker)
        marker.setPosition(lnglat) //向指定经纬度的位置显示marker点标记

        geocoder.getAddress(lnglat, function (status: any, result: any) {
          console.log('666', status, result.regeocode)
          if (status === 'complete' && result.regeocode) {
            var position = result.regeocode.formattedAddress //将address交给父组件
            emit('update:modelValue', position)
            console.log('地理位置：', position)
          } else {
            console.log('根据经纬度查询地址失败')
          }
        })
      }
    })
    .catch((e) => {
      console.log(e)
    })
})

onUnmounted(() => {
  map?.destroy()
})
</script>

<style scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100vh;
  border: 1px solid red;
}
</style>
